<template>
	<div class="setting">
		<div class="innerBox">
			<div class="left">
				<a @click="toPersonal" href="javaScript:void(0)" class="iconfont icon-zuojiantou_huaban"></a>
				<a @click="toUpdataImg" href="javaScript:void(0)" class="iconfont icon-zhaopian"></a>
				<a @click="toUploadImg" href="javaScript:void(0)" class="iconfont icon-shangchuan"></a>
				<a @click="toUpdataInfo" href="javaScript:void(0)" class="iconfont icon-geren"></a>
			</div>
			<div class="right">
				<router-view></router-view>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name:'setting',
		methods:{
			toPersonal(){
				this.$router.push({
					path:'/personal',
					query:{
						userId:this.$store.getters['user/id']
					}
				})
			},
			toUpdataImg(){
				this.$router.push({
					path:'/setting/updataImg'
				})
			},
			toUploadImg(){
				this.$router.push({
					path:'/setting/uploadImg'
				})
			},
			toUpdataInfo(){
				this.$router.push({
					path:'/setting/updataInfo'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.setting{
		width: 100vw;
		height: 100vh;
		padding-top: 120px;
		background-color: #171717;
		.innerBox{
			width: 600px;
			height: 400px;
			margin: 0 auto;
			display: flex;
			.left{
				width: 150px;
				height: 400px;
				display: flex;
				flex-direction: column;
				color: white;
				background-color: #3c3c3c;
				align-items: center;
				a{
					color: white;
					text-decoration: none;
				}
				
				a:first-child{
					font-size: 30px;
					align-self: flex-start;
				}
				
				a:nth-child(n+2){
					width: 50px;
					height: 50px;
					margin-top: 30px;
					font-size: 50px;
					border-bottom: 3px solid white;
					box-shadow: 1px 1px 10px 3px #100e0e;
				}
				
				
				
			}
			.right{
				width: 450px;
				height: 400px;
				background-color: #333333;
			}
		}
	}
</style>